<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/static/images/logo.ico?v=15">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XCLABEL | 标注工具</title>
    <link rel="stylesheet" href="/static/lib/label/css/label.css?v=20">
    <link rel="stylesheet" href="/static/lib/label/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/lib/label/css/switch.css">
          <link href="/static/lib/jquery/toast/1.3.2/jquery.toast.css?v=16" rel="stylesheet">
</head>
<body>

<div class="LabelImage">
    <div class="toolHead">
        <div class="toolMuster">

            <div class="assistNav">
                 <span onclick="window.location.href='/task/index'" class="logo">XCLABEL</span>
            </div>

            <div class="pageNav">
                <div class="pageControl">
                    <div class="pagePrev pageSwitch inline-block" title="上一张"></div>
                    <div class="pageInfo inline-block">
                        <p class="pageName" title="名称">样本文件</p>
                        <p class="nameProcess" title="序号"><span class="processIndex">0</span> / <span class="processSum">0</span></p>
                    </div>
                    <div class="pageNext pageSwitch inline-block" title="下一张"></div>
                </div>
            </div>


            <div class="assistTool">
                <div class="generalFeatures">

                    <p class="featureList toolRect xc_selected" title="绘制矩形">
                        <i class="bg"></i>
                        <span>矩形</span>
                    </p>

                    <p class="featureList toolPolygon" title="绘制多边形">
                        <i class="bg"></i>
                        <span>多边形</span>
                    </p>

                    <p class="featureList toolDrag" title="拖拽">
                        <i class="bg"></i>
                        <span>拖拽</span>
                    </p>
                    <p class="featureList crossLine " title="十字线开关">
                        <input class="mui-switch mui-switch-anim" type="checkbox">
                        <span>十字线</span>
                    </p>
                    <p class="featureList labelShower" title="标注结果显示开关">
                        <input class="mui-switch mui-switch-anim" type="checkbox">
                        <span>标注结果</span>
                    </p>
                              <p class="featureList screenShot" title="快照">
                        <i class="bg"></i>
                        <span>快照</span>
                    </p>
                    <p class="featureList commonBtn toolTagsManager" title="标签管理">
                        <span>标签</span>
                    </p>
                    <p onclick="f_saveAnnotation()" class="featureList commonBtn" title="保存标注">
                        <span>保存</span>
                    </p>
                    <p onclick="f_removeAnnotation()" class="featureList commonBtn" title="删除标注">
                        <span>删除</span>
                    </p>

                </div>
            </div>
        </div>
    </div>

    <div class="canvasMain">
        <div class="canvasContent">
            <canvas id="canvas"></canvas>
            <div class="scaleBox">
                <div class="scaleCanvas"></div>
                <div class="scalePanel"></div>
            </div>
        </div>
        <div class="commentResult">
            <!--
             <div class="historyContent">
                <p class="title">标签列表<a style="float: right;margin-right: 20px;">添加</a></p>
                <div class="historyGroup">
                    <p data-type="add" data-index="0" class="">人</p>
                    <p data-type="add" data-index="1" class="">狗</p>
                </div>
            </div>-->

            <div class="resultArea">
                <p class="title">标注结果 (<span class="resultLength">0</span>)</p>
                <div class="resultList_head">
                    <div class="headChildren">
                        <p class="headName">名称</p>
                        <p class="headEdit">修改</p>
                        <p class="headDelete">删除</p>
                        <p class="headDisplay">显/隐</p>
                    </div>
                </div>
                <div class="resultGroup">
                </div>
                <div class="resultSelectLabel">
                    <p class="selectLabelTip" hidden>请先创建标签</p>
                    <ul class="selectLabel-ul">
                    </ul>
                    <div class="closeLabelManage"><span class="icon-remove-sign"></span></div>
                </div>
            </div>

            <div class="tabBtn focus"><span class="icon-double-angle-right"></span></div>
        </div>
        <div class="labelManage">
            <div class="labelManage-Info">
                <div class="labelManage-menu">
                    <div class="labelManage-createLabel"><button class="button btn-primary labelManage-createButton">创建</button></div>
                </div>
                <div class="labelManage-subList">标签列表：</div>
                <div class="labelManage-group">
                    <p class="labelTip" hidden>请先创建标签</p>
                    <ul class="labelManage-ul">
                    </ul>
                </div>
            </div >
            <div class="labelManage-create" hidden>
                <div class="labelManage-Title">创建标签</div>
                <div class="labelCreate labelCreate-name">
                    <label>标签名称：</label>
                    <input type="text" class="labelCreate-nameInput">
                </div>
                <div class="labelCreate labelCreate-color">
                    <label>标签颜色：</label>
                    <span class="colorPicker" id="colorPicker"></span>
                    <input class="colorHex" id="colorHex" value="#ff0000" data-r="255" data-g="0" data-b="0" readonly>
                </div>
                <div class="labelCreate">
                    <button class="button btn-error removeLabel" title="删除标签">删除</button>
                </div>
                <div class="labelCreateButtons">
                    <button class="button btn-success addLabel">确定</button>
                    <button class="button btn-default closeAdd">取消</button>
                </div>
            </div>
            <div class="closeLabelManage"><span class="icon-remove-sign"></span></div>
        </div>
    </div>
</div>
</body>
<!-- jQuery -->
<script src="/static/lib/jquery/jquery.min.js"></script>
<script src="/static/lib/label/js/colorPicker.js"></script>
<script src="/static/lib/label/js/label.js?v=15"></script>

        <script src="/static/lib/jquery/toast/1.3.2/jquery.toast.min.js"></script>
        <script src="/static/lib/jquery/toast/1.3.2/toast.js"></script>
<script>
    let mTaskCode = "{{ task_code }}";
    let mSampleCode = "{{ sample_code }}";
    let storageDir_www = "{{ storageDir_www }}";
    let elePagePrevBtn = document.querySelector('.pagePrev');
    let elePageNextBtn = document.querySelector('.pageNext');
    let elePageName = document.querySelector('.pageName');         // 标注任务名称
    let eleProcessIndex = document.querySelector('.processIndex'); // 当前标注进度
    let eleProcessSum = document.querySelector('.processSum');     // 当前标注任务总数
    let eleJsToolDrag = document.querySelector('.toolDrag');
    let eleJsToolRect= document.querySelector('.toolRect');
    let eleJsToolPolygon= document.querySelector('.toolPolygon');
    let eleJsToolTagsManager= document.querySelector('.toolTagsManager');

    let eleCanvas = document.getElementById('canvas');
    eleCanvas.width = eleCanvas.clientWidth;// 设置画布初始属性
    eleCanvas.height = eleCanvas.clientHeight;
    //canvas.style.background = "#8c919c";
    eleCanvas.style.background = "#ffffff";// 设置画布宽高背景色

    let mSampleData = [];
    let mSample = {};
    let mHandleSum = 0;
    let mHandleIndex = 0; //标定下标
    let mLabelImage = new LabelImage({
        canvas: eleCanvas,
        scaleCanvas: document.querySelector('.scaleCanvas'),
        scalePanel: document.querySelector('.scalePanel'),
        annotateState: document.querySelector('.annotateState'),
        canvasMain: document.querySelector('.canvasMain'),
        resultGroup: document.querySelector('.resultGroup'),
        crossLine: document.querySelector('.crossLine'),
        labelShower: document.querySelector('.labelShower'),
        screenShot: document.querySelector('.screenShot'),
        colorHex: document.querySelector('#colorHex'),
        toolTagsManager: document.querySelector('.toolTagsManager')
    });

    function f_sample() {
        if(mHandleIndex >= mSampleData.length){
            return;
        }
        let __sample_code = mSampleData[mHandleIndex]["code"]
        window.location.href = "/sample/index?task_code="+mTaskCode+"&sample_code="+__sample_code;
    }


    function f_remove_tool_selected() {
        eleJsToolDrag.classList.remove('xc_selected');
        eleJsToolRect.classList.remove('xc_selected');
        eleJsToolPolygon.classList.remove('xc_selected');
        //for (let i=0; i<eleJsToolPolygon.children.length; i++) {
        //    eleJsToolPolygon.children[i].classList.remove('xc_selected');
        //}
    }
    eleJsToolDrag.onclick = function (){
        f_remove_tool_selected();
        eleJsToolDrag.classList.add('xc_selected');
        mLabelImage.SetFeatures('dragOn', true);

    }
    eleJsToolRect.onclick = function (){
          f_remove_tool_selected();
          eleJsToolRect.classList.add('xc_selected');
          mLabelImage.SetFeatures('rectOn', true);
    }
    eleJsToolPolygon.onclick = function (){
          f_remove_tool_selected();
          eleJsToolPolygon.classList.add('xc_selected');
          mLabelImage.SetFeatures('polygonOn', true);
    }
    eleJsToolTagsManager.onclick = function(){
        f_remove_tool_selected();
        mLabelImage.SetFeatures('tagsOn', true);
    }

    elePagePrevBtn.onclick = function() {
        f_postSaveAnnotation(mHandleIndex,false);

        if (mHandleIndex === 0) {
            mHandleIndex = mHandleSum - 1;
        }
        else {
            mHandleIndex--;
        }
        f_sample();

    };

    elePageNextBtn.onclick = function() {
        f_postSaveAnnotation(mHandleIndex,false);
        if (mHandleIndex === mHandleSum - 1) {
            mHandleIndex = 0;
        }
        else {
            mHandleIndex++;
        }
        f_sample();

    };
    function f_getInfo() {
        $.ajax({
               url: '/sample/getInfo',
               type: "get",
               async: true,
               data: {"task_code":mTaskCode,"sample_code":mSampleCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   if(res.code === 1000){

                       mSample = res["sample"];
                       let __sample_data = res["sample_data"];
                        try {
                            let __labels = mSample["labels"];
                            let __labels_obj = __labels ? JSON.parse(__labels) : [];
                            f_setLabels(__labels_obj);
                        }catch (e) {
                            console.log(e)
                        }

                       for (let i = 0; i < __sample_data.length; i++) {
                           let code = __sample_data[i]["code"];
                           if(mSampleCode === code){
                               mHandleIndex = i;
                           }
                           mSampleData.push(__sample_data[i]);
                       }

                        mHandleSum = mSampleData.length
                        eleProcessSum.innerText = mHandleSum;
                        eleProcessIndex.innerText = mHandleIndex;

                        if(mHandleIndex < mHandleSum){
                            let sample_id = mSample["id"]
                            let sample_code = mSample["code"]
                            let task_code = mSample["task_code"]
                            let old_filename = mSample["old_filename"]
                            let new_filename = mSample["new_filename"]
                            let annotation_state = mSample["annotation_state"]
                            let annotation_content = mSample["annotation_content"]
                            let imageUrl = storageDir_www + "task/"+task_code+"/sample/"+new_filename;

                             elePageName.innerText = sample_id.toString();

                            try {
                                let __annotation_content_obj = JSON.parse(annotation_content);
                                console.log("__annotation_content_obj:",__annotation_content_obj)
                                mLabelImage.SetImage(imageUrl,__annotation_content_obj);
                            }catch (e) {
                                console.log(e)
                                mLabelImage.SetImage(imageUrl);
                            }

                            setTimeout(function() {
                                mLabelImage.SetFeatures('rectOn', true);//设置绘制矩形框
                                mLabelImage.IsShowLabels();
                                mLabelImage.CrossHairSwitch();//设置开启十字线
                            }, 100);

                        }
                   }else{
                       //alert(res.msg);
                   }
               }
            });
    }
    function f_postSaveAnnotation(handleIndex,isForce) {

        if(handleIndex >= mSampleData.length){
            return;
        }
        if(isForce===false){
            //非强制执行状态下，标记内容为空时，无需执行保存
            if(mLabelImage.Arrays.imageAnnotateMemory.length === 0){
                return;
            }
        }

        let d = mSampleData[handleIndex];
        let sample_code = d["code"]
        let annotation_content = JSON.stringify(mLabelImage.Arrays.imageAnnotateMemory)
        let labels = JSON.stringify(mLabels);
        
        $.ajax({
           url: "/sample/postSaveAnnotation",
           type: "post",
           async: true,
           data: {
               "sample_code":sample_code,
               "annotation_content":annotation_content,
               "labels":labels
           },
           dataType: "json",
           timeout: 0,
           error: function () {
               myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               if(res.code === 1000){
                   myAlert(res.msg,"success",1000);
               }else{
                   myAlert(res.msg,"error",1000);
               }
           }
        });

    }
    function f_postDelAnnotation(handleIndex) {

        if(handleIndex >= mSampleData.length){
            return;
        }
        let d = mSampleData[handleIndex];
        let sample_code = d["code"]

        $.ajax({
           url: "/sample/postDelAnnotation",
           type: "post",
           async: true,
           data: {
               "sample_code":sample_code
           },
           dataType: "json",
           timeout: 0,
           error: function () {
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               if(res.code === 1000){
                   myAlert(res.msg,"success",1000);
               }else{
                   myAlert(res.msg,"error",1000);
               }
           }
        });

    }
    function f_saveAnnotation() {
        f_postSaveAnnotation(mHandleIndex,true);
    }
    function f_removeAnnotation() {
        f_postDelAnnotation(mHandleIndex);
    }
    window.onload = function() {
        f_getInfo();
    };
</script>
</html>